<template>
  <div class="login-base">
    <div class="login-page d-flex justify-center">
      <div class="login-view d-flex align-center">
        <div class="right">
          <div class="d-flex align-end">
            <img :src="Logo" alt="logo" height="40" style="border-radius: 4px">
            <div class="font-size-title-3 pl-4" style="color: white">IceSoft Admin</div>
          </div>
        </div>
        <div class="left">
          <div class="font-size-title-1 pb-5" style="color: #fff">IceSoft 企业级中后台前端解决方案</div>
          <a-form
              ref="formRef"
              layout="horizontal"
              :model="form"
          >
            <a-form-item v-bind="validateInfos.username">
              <a-input size="large" v-model:value="form.username" placeholder="请输入用户名">
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)"/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item v-bind="validateInfos.password">
              <a-input size="large" v-model:value="form.password" type="password" placeholder="请输入密码">
                <template #prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" size="large" class="login-form-button" @click.prevent="onSubmit">
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {LockOutlined, UserOutlined} from '@ant-design/icons-vue';
import {reactive} from "vue";
import Logo from "~/assets/logo-white.png";
import {Form} from 'ant-design-vue';
import {LoginApi} from "~/api/login/login.api";
import {useUserStore} from "~/store/modulers/user";
import router from "~/router";
import {useMenuStore} from "~/store/modulers/menu";
import {CommonApi} from "~/api/system/common.api";

const api = new LoginApi();
const commonApi = new CommonApi();
const useForm = Form.useForm;
const userStore = useUserStore();
const menuStore = useMenuStore();
const form = reactive({
  username: undefined,
  password: undefined,
});

const {resetFields, validate, validateInfos} = useForm(
    form,
    reactive({
      username: [{required: true, message: '请输入用户名'}],
      password: [{required: true, message: '请输入密码'}]
    }),
);

function onSubmit() {
  validate().then(async (res) => {
    const resp = await api.loginByUsername(res);
    if (resp.ok) {
      userStore.setUserInfo(resp.data);
      const menu = await commonApi.getUserMenu();
      if (menu.ok) {
        menuStore.setMenu(menu.data);
        menuStore.setDefaultActive('/home')
      }
      await router.push("/");
    }
  }).catch(err => {
    console.log('error', err);
  });
}
</script>

<style scoped lang="scss">
.login-base {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/login-bg.jpg');
  background-size: 100%;

  .login-page {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to left, rgba(#000, 0.3), rgba(#000, 0.6));

    .login-view {
      width: 800px;

      .right {
        width: 400px;
      }

      .left {
        border: 1px rgba(255, 255, 255, 0.25) solid;
        width: 320px;
        background: rgba(#000, 0.4);
        padding: 24px;
        border-radius: 16px;
        backdrop-filter: blur(4px);
      }
    }
  }

  .login-form-button {
    width: 100%;
  }

}

</style>
